<template>
  <el-popover :placement="placement" :width="width" trigger="click">
    <template #reference>
      <div class="iconFull">
        <el-icon>
          <Timer />
        </el-icon>
      </div>

    </template>
    <el-empty description="暂无历史" class="mo-directory-empty" :image-size="48" v-if="empty" />
    <ul class="directory-list">
      <li class="flex aic gap5" v-for="(item, index) in userFileHistory" :key="item.id">
        <div class="name flex1">{{ item.dir }}</div>
        <div class="actions">
          <el-icon @click="remove(index)">
            <Delete />
          </el-icon>
        </div>
      </li>
    </ul>
  </el-popover>
</template>

<script setup>
import { useConfigStore } from "@/store/configStore.js"
import { ref, computed } from "vue"
import { storeToRefs } from "pinia"
const configStore = useConfigStore()
const { userFileHistory } = storeToRefs(configStore)

const empty = computed(() => {
  return userFileHistory.value.length === 0
})

console.log('111',userFileHistory.value.length, configStore.userFileHistory)
const props = defineProps({
  width: {
    type: Number,
    default: 360
  },
  placement: {
    type: String,
    default: 'bottom-start'
  }
})

const visible = ref(false)

const remove = (index) => {
  userFileHistory.value.splice(index, 1)
}
</script>

<style lang="scss" scoped>
.iconFull {
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: 0px 10px;
}

ul {
  padding: 0px;
  margin: 0px;

  li {
    list-style: none;
    padding: 5px;

    &:hover {
      @include background_color("select_bg");
      @include font_color("font_base_in");
    }
  }
}
</style>